<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://localhost:5000/build/cssreset/cssreset-min.css">
    <style>

    @font-face {
        font-family: 'YUIFont';
        src: url('./fonts/yui/yui.eot?v=3.0.1');
        src: url('./fonts/yui/yui.eot?#iefix&v=3.0.1') format('embedded-opentype'),
            url('./fonts/yui/yui.woff?v=3.0.1') format('woff'),
            url('./fonts/yui/yui.ttf?v=3.0.1') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    table {
        width: 100%;
    }
    tr:nth-child(odd) td {
        background: hsl(240, 20%, 90%);
    }
    td {
        margin: 4px 0;
        text-align: center;
    }
    .serif {
        width: 30%;
        font-family: 'Times', 'Times New Roman', 'serif';
        font-size: 32px;
    }
    .sans {
        width: 30%;
        font-family: 'Arial', 'Helvetica', 'sans-serif';
        font-family: 'YUIFont';
        font-size: 32px;
    }
    </style>
<script type="text/javascript" src="../../../../build/yui/yui.js"></script>
</head>
<body class="yui3-skin-sam">
    <table>
        <thead>
            <tr>
                <th>Count</th>
                <th>Unicode</th>
                <th>Serif</th>
                <th>Sans-Serif</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>


<script>
YUI().use('node', 'event', 'paginator', 'paginator-table', function(Y){
    var table = Y.one('tbody'),
        a = 0,
        maxA = 0,
        lastA = 0,
        tr = '',
        code,
        loadMore = Y.one('.loadMore'),
        pgConfig = {
                        totalItems: 0xFFFF,
                        itemsPerPage: 10,
                        view: 'Paginator.Table',
                        viewConfig: {
                            pageSizes: [10, 25, 100]
                        }
                };

    var pg = new Y.Paginator(pgConfig);
    pg.render();

    var pgBottom = new Y.Paginator(pgConfig);
    pgBottom.render('body');

    function buildTable() {

        tr = '';

        a = pg.get('index') - 1;

        maxA = Math.min(a + pg.get('itemsPerPage'), 0xFFFF);

        for (; a < maxA; a++) {
            code = getUnicode(a);
            tr += '<tr>';
            tr += '<td>' + a + '</td>';
            tr += '<td>' + code + '</td>';
            tr += '<td class="serif">&#x' + code + ';</td>';
            tr += '<td class="sans">&#x' + code + ';</td>';
            tr += '</tr>';
        }

        table.setContent(tr);
    }


    function getUnicode (a) {
        a = parseInt(a, 10).toString(16);

        while (a.length < 4) { a = '0' + a; }

        return a;
    }

    buildTable();

    pg.after('itemsPerPageChange', function (e) {
        buildTable();
        if (!e.src || e.src !== 'pg') {
            pgBottom.set('itemsPerPage', e.newVal, { src: 'pg' });
        }
    }, this);

    pg.after('pageChange', function (e) {
        buildTable();
        if (!e.src || e.src !== 'pg') {
            pgBottom.set('page', e.newVal, { src: 'pg' });
        }
    }, this);


    pgBottom.after('itemsPerPageChange', function (e) {
        if (!e.src || e.src !== 'pg') {
            pg.set('itemsPerPage', e.newVal, { src: 'pg' });
        }
    }, this);

    pgBottom.after('pageChange', function (e) {
        if (!e.src || e.src !== 'pg') {
            pg.set('page', e.newVal, { src: 'pg' });
        }
    }, this);



});
</script>
</body>
</html>
